<template>
  <d2-container better-scroll>
    <el-card shadow="never" class="d2-mb">
      <el-form
        class="filter-container"
        ref="searchData"
        :model="searchData"
        label-width="85px"
      >
        <el-row :gutter="20" style="height:95px">
          <el-col :span="5">
            <el-form-item label="商品">
              <el-select
                v-model="searchData.name"
                placeholder="请选择"
                filterable
                style="width:100%;"
                @change="handle_band"
                clearable
              >
                <el-option
                  v-for="item in selectNameList"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"
                >
                  <span style="float: left">{{ item.name }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="产地品牌">
              <el-select
                v-model="searchData.band"
                placeholder="请选择"
                filterable
                style="width:100%;"
                @change="handle_trader"
                clearable
              >
                <el-option
                  v-for="item in selectBandList"
                  :key="item.band"
                  :label="item.band"
                  :value="item.band"
                >
                  <span style="float: left">{{ item.band }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="报价方">
              <el-select
                v-model="searchData.trader"
                placeholder="请选择"
                filterable
                style="width:100%;"
                @change="handle_size"
                clearable
              >
                <el-option
                  v-for="item in selectTraderList"
                  :key="item.trader"
                  :label="item.trader"
                  :value="item.trader"
                >
                  <span style="float: left">{{ item.trader }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="规格">
              <el-select
                v-model="searchData.model"
                placeholder="请选择"
                filterable
                style="width:100%;"
                @change="handle_size"
                clearable
              >
                <el-option
                  v-for="item in selectSizeList"
                  :key="item.model"
                  :label="item.model"
                  :value="item.model"
                >
                  <span style="float: left">{{ item.model }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="品名">
              <el-select
                v-model="searchData.productID"
                placeholder="请选择"
                filterable
                style="width:100%;"
                @change="handle_instrument"
                clearable
              >
                <el-option
                  v-for="item in selectfutureList"
                  :key="item.productID"
                  :label="item.productName"
                  :value="item.productID"
                >
                  <span style="float: left">{{ item.productName }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{
                    item.productID
                  }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="主力合约">
              <el-select
                v-model="searchData.instrumentID"
                placeholder="请选择"
                filterable
                style="width:100%;"
                clearable
              >
                <el-option
                  v-for="item in instrumentList"
                  :key="item.instrumentID"
                  :label="item.instrumentName"
                  :value="item.instrumentID"
                >
                  <span style="float: left">{{ item.instrumentName }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{
                    item.instrumentID
                  }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <div class="mb">
      <el-button type="default" size="mini" @click="produce">
        <d2-icon name="upload" />
        生成
      </el-button>
      <el-button type="default" size="mini">
        <d2-icon name="upload" />
        导出
      </el-button>
    </div>
    <el-card shadow="never" class="d2-mb">
      <div class="inner">
        <ve-line
          :data="chartData"
          :extend="chartExtend"
          height="540px"
          width="100%"
        ></ve-line>
      </div>
    </el-card>
  </d2-container>
</template>

<script>
import { quotBasis } from "@/api/url_info.js";
import { quotSpot } from "@/api/url_info.js";
import { quotFutures } from "@/api/url_info.js";
import { futureCommodity } from "@/api/url_info.js";
import { instrument } from "@/api/url_info.js";
export default {
  //基差
  name: "BASIS",
  components: {},
  data() {
    this.chartExtend = {
      series: {
        symbol: "none"
      }
    };
    return {
      chartData: {
        columns: ["日期", "基差值"],
        rows: []
      },
      searchData: {
        page: 1, //当前页
        pageSize: 40,
        totalPage: 0,
        name: "",
        band: "",
        trader: "",
        model: "",
        instrumentID: ""
      },
      selectNameList: [],
      selectBandList: [],
      selectTraderList: [],
      selectSizeList: [],
      selectfutureList: [],
      instrumentList: [],
      spotTime: [],
      futuresTime: []
    };
  },
  created() {
    this.handle_name();
    this.handle_futureCommodity();
  },
  methods: {
    // 查询商品
    handle_name() {
      quotBasis({ type: "name" })
        .then(res => {
          this.selectNameList = [];
          var data1 = res.result;
          for (var i = 0; i < data1.length; i++) {
            this.selectNameList[i] = {
              name: data1[i]["name"]
            };
          }
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },
    // 查询产地品牌
    handle_band() {
      let params = {
        type: "band",
        name: this.searchData.name
      };
      quotBasis(params)
        .then(res => {
          this.selectBandList = [];
          var data1 = res.result;
          for (var i = 0; i < data1.length; i++) {
            this.selectBandList[i] = {
              band: data1[i]["band"]
            };
          }
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },
    // 查询报价方
    handle_trader() {
      let params = {
        type: "trader",
        name: this.searchData.name,
        band: this.searchData.band
      };
      quotBasis(params)
        .then(res => {
          this.selectTraderList = [];
          var data1 = res.result;
          for (var i = 0; i < data1.length; i++) {
            this.selectTraderList[i] = {
              trader: data1[i]["trader"]
            };
          }
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },
    // 查询规格
    handle_size() {
      let params = {
        type: "model",
        name: this.searchData.name,
        band: this.searchData.band,
        trader: this.searchData.trader
      };
      quotBasis(params)
        .then(res => {
          this.selectSizeList = [];
          var data1 = res.result;
          for (var i = 0; i < data1.length; i++) {
            this.selectSizeList[i] = {
              model: data1[i]["model"]
            };
          }
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },
    // 查询期权品名
    handle_futureCommodity() {
      futureCommodity({ type: "futures" })
        .then(res => {
          this.selectfutureList = [];
          var data1 = res.result;
          for (var i = 0; i < data1.length; i++) {
            this.selectfutureList[i] = {
              productID: data1[i]["productID"],
              productName: data1[i]["productName"]
            };
          }
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },
    // 查询合约
    handle_instrument() {
      instrument({ productID: this.searchData.productID })
        .then(res => {
          this.instrumentList = [];
          var data1 = res.result;
          for (var i = 0; i < data1.length; i++) {
            this.instrumentList[i] = {
              instrumentID: data1[i]["instrument"],
              instrumentName: data1[i]["instrumentName"]
            };
          }
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },

    //生成
    async produce() {
      let params = {
        type: "his",
        source: "basis",
        name: this.searchData.name,
        model: this.searchData.model,
        band: this.searchData.band,
        trader: this.searchData.trader
      };
      await quotSpot(params)
        .then(res => {
          let spotTime = [];
          let data = res.result;
          for (let i = 0; i < data.length; i++) {
            spotTime[i] = {
              pub_date: data[i]["pub_date"],
              price: data[i]["price"]
            };
          }
          this.spotTime = spotTime;
        })
        .catch(err => {
          this.$message.error(err.msg);
        });

      await quotFutures({
        instrumentID: this.searchData.instrumentID,
        source: "basis"
      })
        .then(res => {
          let futuresTime = [];
          let data = res.result;
          for (var i = 0; i < data.length; i++) {
            futuresTime[i] = {
              TradingDay: data[i]["TradingDay"],
              cprice: data[i]["cprice"]
            };
          }
          this.futuresTime = futuresTime;
          let spotTime = this.spotTime,
            chartData = [],
            basis = [],
            time = [],
            options = [];
          for (let i = 0; i < spotTime.length; i++) {
            for (let j = 0; j < futuresTime.length; j++) {
              if (spotTime[i].pub_date == futuresTime[j].TradingDay) {
                basis.push(spotTime[i].price - futuresTime[j].cprice);
                time.push(spotTime[i].pub_date);
              }
            }
          }
          for (let i = 0; i < basis.length; i++) {
            let a = {};
            a.price = basis[i];
            a.time = time[i];
            options.push(a);
          }
          for (let i = 0; i < options.length; i++) {
            chartData[i] = {
              日期: options[i].time,
              基差值: options[i].price
            };
          }
          if (chartData.length > 0) {
            this.chartData.rows = chartData;
          } else {
            this.chartData.rows = [];
            this.$message({
              message: "暂无基差数据",
              type: "warning"
            });
          }
          console.log("555", chartData);
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 15px !important;
}
</style>
